<template>
  <div id="navigation">
    <div class="navigation">
      <router-link to="home" :class="this.index == 1 ? 'is_home' : ''">首页</router-link>
      <div class="search">
        <input type="text" placeholder="请输入帖名" v-model:value="search" @input="handleSearchInput">
        <button @click="handleSearch">
          <span>搜索</span>
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="13" height="13"
               viewBox="0 0 11 11">
            <defs>
              <pattern id="a" preserveAspectRatio="xMidYMid slice" width="100%" height="100%" viewBox="0 0 200 200">
                <image width="200" height="200"
                       xlink:href=""/>
              </pattern>
            </defs>
            <rect class="a" width="11" height="11" style="fill:url(#a)"/>
          </svg>
        </button>
        <div class="search-posts" ref="posts" style="display: none;">
          <ul>
            <li><p class="post-null" v-if="searchPosts.length == 0">暂无此帖名帖子</p></li>
            <li v-for="(item,index) in searchPosts" @click="handleReadPost(item.id)"><p>{{ item.title }}</p></li>
          </ul>
        </div>
      </div>
      <div class="not-login" v-if="this.userinfo==''">
        <router-link to="login">登录</router-link>
        |
        <router-link to="register">注册</router-link>
      </div>
      <div class="userinfo" v-if="this.userinfo">
        <div class="user-image">
          <img :src="this.userinfo" alt="">
        </div>
        <router-link to="profile">个人中心</router-link>
      </div>
    </div>
  </div>
</template>

<script>
import store from '../store'
import router from "../router";

export default {
  name: "navigation",
  props: ['index'],
  data() {
    return {
      userinfo: '',
      search: '',
      searchPosts: []
    };
  },
  mounted() {
    if (Boolean(sessionStorage.getItem('token'))) {
      this.Request('get', '/v1/user', {}).then(res => {
        this.userinfo = res.data.headImg
      })
    }
  },
  methods: {
    handleSearch: function () {
      if (this.search.trim() == '') {
        alert('请输入帖名')
      } else {
        this.Request('get', '/v1/posts', {
          search: this.search
        }).then(res => {
          if (res.data.length == 0) {
            this.$refs.posts.style.display = 'block'
          } else {
            this.searchPosts = res.data
            this.$refs.posts.style.display = 'block'
            // sessionStorage.setItem('postId', res.data)
            // router.push('details')
          }
        })
      }
    },
    handleReadPost: function (id) {
      sessionStorage.setItem('postId', id)
      if (window.location.pathname == '/details') {
        router.go(0)
      } else {
        router.push('details')
      }
    },
    handleSearchInput: function () {
      this.$refs.posts.style.display = 'none'
    }
  }
}
</script>

<style lang="less">
#navigation {
  width: 100%;
  background: #FFFFFF;
  border-bottom: 2px solid #ECECEC;

  .navigation {
    width: 1200px;
    margin: 0 auto;
    height: 70px;
    align-items: center;
    display: grid;
    grid-template-columns: 36px auto 200px;
  }

  .navigation > a {
    height: 70px;
    font-size: 18px;
    line-height: 70px;
    font-weight: 400;
    color: #333333;
    position: relative;
  }

  .is_home::before {
    content: '';
    position: absolute;
    bottom: 0;
    display: block;
    width: 36px;
    height: 4px;
    background: #3981FF;
    border-radius: 2px 2px 2px 2px;
  }

  .search {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .search input {
    width: 342px;
    height: 32px;
    background: #F3F4F5;
    border: none;
    text-indent: 10px;
    font-size: 16px;
    border-radius: 5px;
  }

  .search input::placeholder {
    font-size: 16px;
    font-weight: 400;
    color: #999999;
    font-family: PingFang SC-Regular, PingFang SC;
  }

  .search button {
    width: 66px;
    height: 32px;
    background: #3981FF;
    transform: translate(-8px, 0);
    border-radius: 5px;
    border: none;
    display: flex;
    gap: 3px;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 400;
    color: #FFFFFF;
  }

  .search .search-posts {
    position: absolute;
    top: 35px;
    right: 10px;
    background: #fff;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.09);
    padding: 5px 20px;
    z-index: 10;
  }

  .search .search-posts .post-null {
    text-align: center;
  }

  .search .search-posts p {
    width: 350px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    margin: 5px auto;
    padding-bottom: 5px;
    border-bottom: solid 1px #999;
  }

  .search .search-posts li:last-child p {
    border: none;
  }

  .not-login {
    text-align: right;
  }

  .not-login a {
    font-size: 16px;
    font-weight: 400;
    color: #333333;
  }

  .userinfo {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
  }

  .user-image {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    font-size: 16px;
    font-weight: 400;
    color: #000000;
  }

  .user-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
</style>
